<template>
  <div class="app-container">
    <k-button
      class="top-btn"
      value="创建玩法说明"
      @click.native="addItemDialog"
    />

    <!--表格相关 -->
    <el-table
      :data="listData"
      border
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 30px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        min-width="60px"
        type="index"
        label="序号"
        align="center"
      />
      <el-table-column
        prop="name"
        min-width="100px"
        label="名称"
        align="center"
      />
      <el-table-column
        prop="code"
        min-width="100px"
        label="模块"
        align="center"
      />
      <!-- <el-table-column prop="content" min-width="100px" label="内容" align="center" /> -->
      <!-- <el-table-column prop="needReset" min-width="100px" label="是否必须查看" align="center">
          <template slot-scope="scope">
            {{ scope.row.needReset ? '是' : '否' }}
          </template>
        </el-table-column> -->
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              class="table-btn"
              value="查看/修改"
              @click.native="updateActivityDialog(scope.row)"
            />
            <k-button
              class="table-btn"
              value="删除"
              @click.native="delDialog(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <k-dialog
      :show-hide.sync="customBaby.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[customBaby.dialogStatus]"
      class="customBaby-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveManualData"
    >
      <el-form
        ref="ruleForm"
        :model="customBabyInfo"
        label-width="auto"
        :rules="rules"
      >
        <el-form-item label="玩法主题：" prop="name">
          <el-input
            v-model="customBabyInfo.name"
            placeholder="请输入玩法主题"
          />
        </el-form-item>
        <el-form-item label="玩法类型：" prop="code">
          <el-select
            v-model="customBabyInfo.code"
            filterable
            :disabled="!authorityHandle(56)"
          >
            <el-option
              v-for="value in explainList"
              :key="value.lineId"
              :label="value.lineName"
              :value="value.lineId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="内容介绍：" prop="content">
          <quill-editor
            ref="myQuillEditor"
            v-model.trim="customBabyInfo.content"
            :options="editorOption"
            class="editer"
          />
        </el-form-item>
        <el-form-item
          v-if="customBaby.dialogStatus == 'update'"
          label="是否必须查看："
        >
          <el-radio-group
            v-model="customBabyInfo.needReset"
            fill="#3b425d"
            text-color="#ffffff"
          >
            <el-radio :label="true">是</el-radio>
            <!-- <el-radio :label="2">skinsbus</el-radio> -->
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </k-dialog>
  </div>
</template>
  
  <script>
import Pagination from "@/components/Pagination";
import {
  playIntroduction,
  createPlayIntroduction,
  playIntroductionContent,
  updatePlayIntroduction,
  delPlayIntroduction,
} from "@/api/message/message";

export default {
  name: "Extension",
  components: { Pagination },
  dicts: ["IDENTITY_TYPE"],
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入玩法主题", trigger: "blur" }],
        code: [{ required: true, message: "请输入玩法类型", trigger: "blur" }],
        content: [
          { required: true, message: "请输入内容介绍", trigger: "blur" },
        ],
      },
      payList: [
        { lineId: 2, lineName: "福利库" },
        { lineId: 1, lineName: "赠品库" },
        { lineId: 1, lineName: "数字卡库" },
      ],
      explainList: [
        { lineId: "box", lineName: "心跳时刻" },
        { lineId: "battle", lineName: "Battle" },
        { lineId: "roll ", lineName: "roll房" },
        { lineId: "ammunition_shop", lineName: "晶粹商城" },
        { lineId: "goods_vault", lineName: "饰品库" },
        { lineId: "asset_vault", lineName: "数字卡库" },
        { lineId: "envelope", lineName: "红包" },
        { lineId: "equity_vault", lineName: "权益库玩法" },
        { lineId: "card_shop", lineName: "卡牌商城" },
        { lineId: "the_charts", lineName: "排行榜" },
        { lineId: "mail", lineName: "站内信" },

      ],
      listData: [],
      textMap: {
        update: "修改说明",
        create: "添加说明",
      },
      multipleSelection: [],
      customBabyInfo: {
        name: undefined,
        code: undefined,
        content: undefined,
        needReset: undefined,
      },
      editorOption: {
        placeholder: "请输入内容",
        modules: {
          // 富文本初始化
          "emoji-toolbar": true,
          "emoji-shortname": true,
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], // 列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除字体样式
            ["image"], // 上传图片、上传视频
            ["emoji"],
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false,
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },
      },
      customBaby: {
        showHide: false,
        dialogStatus: "create",
      },
      payStepSettingDialog: {
        showHide: false,
      },
      chargeSetting: {
        // 首充赠送
        id: 0,
        itemList: [
          {
            rechargeAmount: undefined, // 消费挡位',
            givePercent: undefined, // 消费赠送'
          },
        ],
      },
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: "",
          start: "",
        },
      },
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    saveManualData() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.customBaby.dialogStatus == "update") {
            updatePlayIntroduction(this.customBabyInfo).then((res) => {
              this.$message.success("修改成功");
              this.loadData();
            });
          } else {
            createPlayIntroduction(this.customBabyInfo).then((res) => {
              this.$message.success("添加成功");
              this.loadData();
            });
          }
          this.customBaby.showHide = false;
        }
      });
    },
    // 创建
    addItemDialog() {
      this.customBabyInfo = {
        name: undefined,
        code: undefined,
        content: undefined,
        needReset: undefined,
      };
      this.customBaby.dialogStatus = "create";
      this.customBaby.showHide = true;
    },
    // 修改
    updateActivityDialog(v) {
      console.log(v);
      this.customBabyInfo = v;
      this.customBabyInfo.id = v.id;
      this.customBaby.dialogStatus = "update";
      this.customBaby.showHide = true;
      this.customBabyInfo.needReset = "";
      playIntroductionContent(v.id).then((res) => {
        this.customBabyInfo.content = res.data;
      });
    },
    // 删除
    delDialog(v) {
      this.$confirm("确定删除选中的玩法说明么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delPlayIntroduction(v.id).then((res) => {
            if (res.status == 200) {
              this.$message.success("操作成功");
              this.loadData();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    loadData() {
      playIntroduction().then((res) => {
        console.log(res);
        const data = res.data;
        this.listData = data;
        // this.totalRows = data.totalRows
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1;
      this.loadData();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.editer {
  width: 500px;
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;

  ::v-deep .ql-container {
    height: 270px;
    border-radius: 0px 0px 8px 8px;
  }

  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
  ::v-deep .ql-container.ql-snow {
    background-color: #000000;
  }
}

.customBaby-dialog {
  ::v-deep .el-dialog__body {
    padding: 10px 100px;
  }

  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }
}
.top-btn {
  margin-top: 30px;
}
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .right-item {
    margin-right: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
.Recharge_Data {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  color: #000;
  .Recharge_Data_box {
    width: 80%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 100px;
      height: 35px;
      input {
        width: 100px;
        height: 35px;
      }
    }
    span {
      font-size: 14px;
      width: 100px;
    }
  }
  .operation {
    width: 12%;
    display: flex;
    justify-content: space-between;
    .el-icon {
      &-circle-plus,
      &-remove {
        font-size: 22px;
        color: #3b425d;
        margin-left: 10px;
      }
    }
  }
}
</style>
  